<template>
    <a-table :columns="columns" :dataSource="HwDataSource" :pagination="pagination" @change="onChange">
        <!--搜索部分-->
        <div
                slot="filterDropdown"
                slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                style="padding: 8px">
            <a-input
                    v-ant-ref="c => searchInput = c"
                    :placeholder="`Search ${column.dataIndex}`"
                    :value="selectedKeys[0]"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @pressEnter="() => handleSearch(selectedKeys, confirm)"
                    style="width: 188px; margin-bottom: 8px; display: block;"/>
            <a-button
                    type="primary"
                    @click="() => handleSearch(selectedKeys, confirm)"
                    icon="search"
                    size="small"
                    style="width: 90px; margin-right: 8px">Search
            </a-button>
            <a-button
                    @click="() => handleReset(clearFilters)"
                    size="small"
                    style="width: 90px">Reset
            </a-button>
        </div>
        <a-icon
                slot="filterIcon"
                slot-scope="filtered"
                type="search"
                :style="{ color: filtered ? '#108ee9' : undefined }"/>
        <template slot="customRender" slot-scope="text">
      <span v-if="searchText">
        <template
                v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
          <mark
                  v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                  :key="i"
                  class="highlight">{{ fragment }}</mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
            <template v-else>{{ text }}</template>
        </template>


        <!--表格最后两列-->
        <p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{ record.description }}</p>
        <div slot="ddScore" slot-scope="record">
            <div v-if="record.wljd.wljdZt===0">
                未签协议
            </div>
            <div v-if="record.wljd.wljdZt===1">
                未上货
            </div>
            <div v-if="record.wljd.wljdZt===2">
                已上货
            </div>
            <div v-if="record.wljd.wljdZt===3">
                运输中
            </div>
            <div v-if="record.wljd.wljdZt===4">
                已到达
            </div>
            <div v-if="record.wljd.wljdZt===5">
                已卸货
            </div>
            <div v-if="record.wljd.wljdZt===6">
                货主付款
            </div>
            <div v-if="record.wljd.wljdZt===7">
                司机收款
            </div>
        </div>
        <div slot="ddScoreTime" slot-scope="record">
            <div v-if="record.wljd.wljdZt===0">
                {{ record.wljd.wljdFqjdqqrqsj }}
            </div>
            <div v-if="record.wljd.wljdZt===1">
                {{ record.wljd.wljdQsxyrqsj }}
            </div>
            <div v-if="record.wljd.wljdZt===2">
                {{ record.wljd.wljdZhrqsj }}
            </div>
            <div v-if="record.wljd.wljdZt===3">
                {{ record.wljd.wljdYsrqsj }}
            </div>
            <div v-if="record.wljd.wljdZt===4">
                {{ record.wljd.wljdDdmddrqsj }}
            </div>
            <div v-if="record.wljd.wljdZt===5">
                {{ record.wljd.wljdXhrqsj }}
            </div>
            <div v-if="record.wljd.wljdZt===6">
                {{ record.wljd.wljdFkrqsj }}
            </div>
            <div v-if="record.wljd.wljdZt===7">
                {{ record.wljd.wljdQrfkrqsj }}
            </div>
        </div>
    </a-table>
</template>

<script>
    export default {
        name: "HwTable",
        props: ["HwDataSource"],
        data() {
            return {
                searchText: null,
                searchInput: null,
                columns: [{
                    title: '序号',
                    dataIndex: 'key',
                    width: 30,
                }, {
                    title: '发货人',
                    dataIndex: 'hzUser.userXm',
                    width: 80,
                    //   搜索
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.hzUser.userXm.toString().toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                            setTimeout(() => {
                                this.searchInput.focus();
                            }, 0);
                        }
                    },
                }, {
                    title: '货物名称',
                    dataIndex: 'hw.hwMc',
                    filters: [
                        {
                            text: 'Joe',
                            value: 'Joe'
                        },
                        {
                            text: 'Jim',
                            value: 'Jim'
                        },
                    ],
                    width: 80,
                    onFilter: (value, record) => record.hwInfo.hw.hwLx.indexOf(value) === 0,
                }, {
                    title: '货物类型',
                    dataIndex: 'hwlx.hwLx',
                    width: 80,
                }, {
                    title: '货物发布期',
                    dataIndex: 'hw.hwFbrqsj',
                    width: 80,
                    sorter: (a, b) => a.wljd.wljdFqjdqqrqsj - b.wljd.wljdFqjdqqrqsj,
                }, {
                    title: '货物用车类型',
                    dataIndex: 'hwyclx.hwYclx',
                    width: 80,
                }, {
                    title: '货物的运输类型',
                    dataIndex: 'hwyslx.hwYslx',
                    width: 80,
                }],
                pagination: {
                    defaultPageSize: 10,
                    style: {
                            marginRight: '10px',
                            marginTop: '12px'
                        }
                }
            }
        },
        methods: {
            onChange(pagination, filters, sorter) {
                console.log('params', pagination, filters, sorter)
            },
            handleSearch(selectedKeys, confirm) {
                confirm();
                this.searchText = selectedKeys[0];
            },
            handleReset(clearFilters) {
                clearFilters();
                this.searchText = '';
            },
        }
    }
</script>
